<template>
    <el-container>
        <el-header>
            <!--面包屑-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品详情</el-breadcrumb-item>
            </el-breadcrumb>
            <hr>
            <!--删除添加搜索-->
            <el-row class="title-row">
                <el-col :span="15">
                    <el-button type="danger" icon="el-icon-refresh">详情重置</el-button>
<!--                    <input type='file' accept="image/*" name="img" id="upload_file" @change="update($event)">-->
                    <el-button type="text" @click="dialogFormVisible = true;">新增详情</el-button>
                </el-col>
                <el-col :span="6" class="search">
                    <span>商品搜索:</span>
                    <el-input  v-model="input" placeholder="请输入产品编号"></el-input>
                </el-col>
                <el-col :span="3">
                    <div style="margin-left: -5px;margin-top: 5px" class="check-bt"  @click="sousuo(input)">搜索</div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div class="el-main-div">
                <div>默认以产品添加日期前后倒序排列</div>
                <div>
                    <button @click="today">显示今日新增产品</button>
                </div>
            </div>
            <!--表格显示的区域 -->
            <el-table ref="multipleTable" style="width: 100%" border :data="productData">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="id" label="产品编号" width="70"></el-table-column>
                <el-table-column prop="product.name" label="产品名称" width="160"></el-table-column>
                <el-table-column prop="highlight" label="高亮标语" width="160"></el-table-column>
                <el-table-column prop="describe" label="标签(最多5个，每个最多8个字)" width="200"></el-table-column>
                <el-table-column prop="product.image" label="商品展示图(4个)" width="160"></el-table-column>
                <el-table-column prop="productset" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="xiugai(scope.$index)" class="classset-btn">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--表单 ref:参数来源 rules:验证规则 prop指定规则名  inline行内显示 :inline="true"
             多行输入：type="textarea"  -->
<!--            新增-->
            <el-dialog title="新增详情" :visible.sync="dialogFormVisible" width="40%">
                <el-form :model="form" >
                    <el-form-item label="产品编号" :label-width="formLabelWidth">
                        <el-input with="100px" v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="产品名称" :label-width="formLabelWidth">
                        <el-input with="100px" v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="高亮标语" :label-width="formLabelWidth">
                        <el-input with="100px" v-model="form.high" placeholder="建议20个字" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="标签" :label-width="formLabelWidth">
                        <el-input with="100px" v-model="form.sign" autocomplete="off" placeholder="每个标签用/隔起来，最多五个，每个不超过8个字"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片" :label-width="formLabelWidth">
                        <el-input with="100px" v-model="form.img" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false;submitForm('classForm')">确 定</el-button>
                </div>
            </el-dialog>
<!--            修改-->
            <el-form :model="productForm" :rules="rules" ref="classForm"
                     class="productForm" v-if="show=isShow">
                <div class="productForm-title">
                    <span>修改详情</span>
                    <i class="el-icon-close" @click="resetForm('classForm')"></i>
                </div>
                <!--required前面的小红点-->
                <el-form-item label="产品编号" prop="productno" required>
                    <el-col :span="12">
                        <el-input v-model="productForm.prono" disabled></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="产品名称" prop="productname">
                    <el-col :span="12">
                        <el-input v-model="productForm.proname"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="高亮标语" prop="productmark">
                    <el-col :span="12">
                        <el-input v-model="productForm.prodmark"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="产品标签" prop="productlable">
                    <el-col :span="12">
                        <el-input v-model="productForm.prodlable"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="商品展示图" prop="productshow">
                    <el-col :span="12">
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                   :on-remove="handleRemove" list-type="picture"
                                   v-model="productForm.prodshow">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-col>
                </el-form-item>

                <el-form-item class="D-btn">
                    <el-button type="danger" @click="set(index,'classForm');resetForm">修改</el-button>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer>
            <!--总的数据和分页-->
            <div>共{{productData.length}}条数据</div>
            <div class="block">
                <!--currentPage1默认显示第几页  < prev, 当前pager, >next, 跳转的页jumper
                handleSizeChange每页长度变化（我删掉了）handleCurrentChange为currentPage发生改变时的相应函数 -->
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="productData.length">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        name: "DetailController",
        data() {
            return {
                mid:[],
                index: [],
                tableData:[],
                form: {
                    id:'',
                    name: '',
                    high: '',
                    sign: '',
                },
                formLabelWidth: '120px',
                dialogFormVisible: false,
                img:'',
                currentPage1: 1,                             //默认显示的页数在那一页
                checkList: [],
                isShow: false,                                //是否显示表单
                input: '',                                    //搜索框的内容
                productData: [],                       //显示的数据
                count1: 0,
                chushi: "5",
                productForm: {
                    prono: '',
                    proname: '',
                    prodmark: '',
                    prodlable: '',
                    prodshow: '',
                },                 //表单内容
                rules: {
                    prodno: {required: true, message: "编号为必填项", trigger: "blur"},
                }                                 //表单验证规则
            }
        },
        created: function () {
            this.$axios({
                method: 'post',
                url: '/api/detailManager/detailList',
                params: {
                    page: '1',
                    limit: '6'
                }
            }).then(res => {
                console.log("查询所有", res);
                this.productData=res.data.detailList;
                // console.log(this.productData)

            }).catch(err => {
                console.log("catch里的错误")
            });
        },
        methods: {
            openModal() {
                if(this.isShow === false) {
                    this.isShow = true;
                } else {
                    this.isShow = false;
                }
            },                              //打开新增表单框
            resetForm() {
                this.isShow = false;
            },                              //关闭新增表单框
            today() {
                this.$axios({
                    method: 'post',
                    url: '/api/detailManager/findByDate',
                    data: this.qs.stringify({
                        page: 1,
                        limit: this.chushi
                    })
                }).then(res => {
                    console.log("当日新增", res);
                    this.productData=res.data.detailList

                }).catch(err => {
                    console.log("catch里的错误")
                });
            },
            handleRemove(e) {
                console.log(e);
            },                             //移除图片
            sousuo() {
                this.$axios({
                    method: 'post',
                    url: '/api/detailManager/findByKeywords',
                    data: this.qs.stringify({
                        keywords: this.input,
                        page: 1,
                        limit: 10,
                    })
                }).then(res => {
                    console.log("模糊查询", res);
                    this.productData=res.data.detailList

                }).catch(err => {
                    console.log("catch里的错误")
                });
            },
            xiugai(index) {
                this.index=index
                // console.log(this.productData[index].id);
                this.$axios({
                    method: 'post',
                    url: '/api/detailManager/findById',
                    data: this.qs.stringify(
                        {
                            id:this.productData[index].id
                        }
                    )
                }).then(res => {
                    // prodno: '',
                    //     prodname: '',
                    //     prodmark: '',
                    //     prodlable: '',
                    //     prodshow: '',
                    console.log("查询当前id", res);
                    console.log(res.data.detail.id)
                    console.log(res.data.detail.product.name)
                    if (res.data.status === 200) {
                        this.productForm.proid = res.data.detail.id
                        this.productForm.proname = res.data.detail.product.name
                        this.productForm.prodmark=res.data.detail.highlight
                        this.productForm.prodlable=res.data.detail.describe
                        this.productForm.prodshow=res.data.detail.product.image
                        this.mid=res.data.detail.product.id
                    }

                }).catch(err => {
                    console.log("catch里的错误")
                });
                let mo = this.productForm;                  //mo是模态框
                let biao = this.productData[index];       //biao是表格的内容
                mo.prodno = biao.productno;
                mo.prodname = biao.productname;
                mo.prodmark = biao.productmark;
                mo.prodlable = biao.productlable;
                mo.prodshow = biao.productshow;
                this.isShow = true;
            },                             //修改状态
            // resetForm() {
            //     this.isShow = false;
            // },                              //关闭新增表单框
            submitForm() {
                // this.$axios.post('/api/detailManager/addDetail', this.img,config)
                console.log(this.form.name)
                this.$axios({
                    method: 'post',
                    url: '/api/detailManager/addDetail',
                    // headers: {'Content-type': 'application/json'},
                    data: {
                        productid: this.form.id,
                        // name:this.form.name,
                        describe: this.form.sign,
                        highlight: this.form.high,
                        productImage:[this.form.img]
                    }
                }).then(res => {
                    console.log("新增查询", res);
                    // console.log(this.img.get('file'))
                    // this.productData=res.data.detailList
                    this.$axios({
                        method: 'post',
                        url: '/api/detailManager/detailList',
                        params: {
                            page: '1',
                            limit: '6'
                        }
                    }).then(res => {
                        console.log("查询所有", res);
                        this.productData=res.data.detailList;
                        // console.log(this.productData)
                        this.count1=res.data.total
                    }).catch(err => {
                        console.log("catch里的错误")
                    });

                }).catch(err => {
                    console.log("catch里的错误")
                });
            }, //新增表单内容JSON 格式
            set() {
                console.log(this.index)
                this.$axios({
                    method: 'post',
                    url: '/api/detailManager/updateDetail',
                    // headers: {'Content-type': 'application/json'},
                    data: {
                        id: this.productForm.prono,
                        describe:this.productForm.prodlable,
                        highlight:this.productForm.prodmark,
                        productImages: [{id:this.mid,image:this.productForm.prodshow}]
                    }
                }).then(res => {
                    console.log("修改", res);
                    if (res.data.status==200) {
                        this.productData[this.indexid].id =this.productForm.prono,
                        this.productData[this.indexid].describe = this.productForm.prodlable,
                        this.productData[this.indexid].product.name = this.proform.proname
                        this.productData[this.indexid].highlight =this.productForm.prodmark,
                        this.productData[this.indexid].product.image = this.productForm.prodshow

                    }

                }).catch(err => {
                    console.log("catch里的错误")
                });
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.$axios.post('/api/proManager/goodsList',this.qs.stringify( {
                    page: val,
                    limit: this.chushi
                })).then(res => {
                    this.tableData = res.data.productData
                    // let data = res.data.detailList
                })
            }      ,            //当前页面跳转
            handleSelectionChange(val) {
                this.kong = val;
                console.log(this.kong)
            }
        }
    }
</script>

<style scoped lang="less">
    .el-container {
        margin: 0 auto;
    }

    /*底部的样式*/
    .el-footer {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        & > div:nth-of-type(2) {
            /*border: 1px solid red;*/
            display: flex;
            flex-flow: column nowrap;
        }
    }

    /*表单样式*/
    .productForm {
        border: 1px solid #000000;
        padding-left: 50px;
        width: 35%;
        height: 450px;
        border-radius: 10px;
        background-color: rgb(252, 252, 252);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 4;

        & > .productForm-title {
            height: 30px;
            line-height: 30px;
            /*border: 1px solid red;*/
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            margin-left: -50px;
            margin-bottom: 10px;
            padding: 0 20px;
            font-size: 12px;
            background-color: lightgray;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;

            & > .el-icon-close {
                font-size: 16px;
                height: 30px;
                line-height: 30px;
            }
        }
    }

    .D-btn {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    .el-main-div {
        border: .5px solid #cdcdcd;
        border-bottom: none;
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        & > div {
            color: grey;

            & > button {
                height: 30px;
                width: 150px;
                background-color: #4168c9;
                border: none;
                border-radius: 5px;
                color: white;
                outline: none;
            }
        }
    }

    /*表格的样式*/
    .el-table {
        font-size: 12px;
    }

    .classset-btn {
        width: 50px;
        height: 30px;
        padding: 0;
    }

    /*上面的添加搜索删除按钮样式*/
    .title-row {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        height: 40px;
        /*border: 1px solid #3006ff;*/
        font-size: 14px;
    }

    .search {
        display: flex;
        flex-flow: row nowrap;
        margin-right: 10px;

        & > span {
            width: 35%;
            font-size: 12px;
            color: grey;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            /*border: 1px solid #3006ff;*/
        }
    }

    /*整体*/
    .el-container {
        /*border: 1px solid red;*/
        font-size: 12px;
        width: 900px;
    }
</style>